<template>
  <view class="log-in">
    <u-row justify="space-between" gutter="10" class="header">
      <u-col span="9">
        <view class="demo-layout bg-purple">
          <u-icon name="close" color="#2979ff" size="28" @tap="clear()"></u-icon>
        </view>
      </u-col>
      <u-col span="3">
        <view class="demo-layout qr-code" @tap="qrCode()">{{ text }}</view>
      </u-col>
    </u-row>
    <u-row justify="space-between" gutter="10">
      <u-col span="12">
        <image src="../../static/lufei.jpg" class="logo"></image>
      </u-col>
    </u-row>
    <view v-show="qrCodeFlag">
      <u-row justify="center" gutter="10" class="phone">
        <u-col span="1">
          <view class="demo-layout bg-purple">
            <u-icon name="account" color="#2979ff" size="28"></u-icon>
          </view>
        </u-col>
        <u-col span="10">
          <u--input inputAlign="center" placeholderStyle="color:black;" placeholder="请输入手机号" border="surround"
            v-model="phone"></u--input>
        </u-col>
      </u-row>
      <u-row justify="center" gutter="10" class="pwd">
        <u-col span="1">
          <view class="demo-layout bg-purple">
            <u-icon name="lock-open" color="#2979ff" size="28"></u-icon>
          </view>
        </u-col>
        <u-col span="10">
          <u--input inputAlign="center" placeholderStyle="color:black;" placeholder="请输入您的密码" border="surround"
            v-model="password"></u--input>
        </u-col>
      </u-row>
      <u-row justify="center" gutter="10" class="loin-in-button">
        <u-col span="6">
          <u-button class="success" type="success" text="登录" @click='login()'></u-button>
        </u-col>
      </u-row>

    </view>
    <view class="box-qr-code" v-show="qrcodeImg"> 
      111
    </view>
    <u-notify ref="uNotify" message="Hi uView"></u-notify>
    <u-loading-icon text="加载中" textSize="18" :show="flag"></u-loading-icon>
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        value: '',
        phone: '',
        password: '',
        flag:false,
        qrCodeFlag: true,
        qrcodeImg: false,
        text:'手机号登录'
      };
    },
    computed: {
      ...mapState(['cookie'])
    },
    methods: {
      onReady() {
        uni.setNavigationBarTitle({
            title: '网易云登录'
        });
      },
      //手机号登录
      login() {
        if (!this.phone && !this.password) {
          this.$refs.uNotify.warning('不能为空')
        } else {
          let phone = this.phone
          let pwd = this.password
          this.$api(`/login/cellphone?phone=${phone}&password=${pwd}`).then(res => {
            if (res.code === 200) {
              this.$refs.uNotify.success('登录成功')
              uni.setStorageSync('cookie', res.cookie)
              uni.navigateTo({
                url: "/pages/index/index"
              })
              this.flag = false
            } else {
              this.flag = false
              this.$refs.uNotify.error('用户名或手机号错误')
            }
          })
        }
      },
     //清空输入框
      clear() {
        this.phone = ''
        this.pwd = ''
      },
      //二维码登录
      qrCode() {
        this.qrCodeFlag = !this.qrCodeFlag
        this.text = !this.qrCodeFlag ? '二维码登录':'手机号登录'
        this.qrcodeImg = !this.qrcodeImg 
      }
    }
  }
</script>

<style lang="scss" scoped>
  .log-in {
    width: 100vw;
    height: 100vh;
    background: url(../../static/logo-in-bj.jpg) no-repeat center / cover;
  }

  .header {
    padding: 60rpx 20rpx 80rpx 20rpx;
  }

  .logo {
    width: 250rpx;
    height: 250rpx;
    object-fit: cover;
    border-radius: 20rpx;
    border: 2rpx dashed blue;
    margin: 0 auto 80rpx;
  }

  .phone,
  .pwd {
    margin-right: 50rpx !important;
    margin-bottom: 40rpx;
    .u-icon {
      margin-left: 100rpx;
    }
  }
  .qr-code {
    color: red;
    font-size: 30rpx;
    font-weight: bold;
  }
</style>
